<template>
  <div>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
            <router-link :to="'/home/newsinfo/'+item.id">
                <img class="mui-media-object mui-pull-left" :src="item.img_url">
                <div class="mui-media-body">
                    <h3>{{item.title}}</h3> 
                    <p class='mui-ellipsis'>
                        <span>发表时间：{{item.add_time | dateFormat('YYYY-MM-DD')}}</span>
                        <span>点击次数：{{item.click}}</span>
                    </p>
                </div>
            </router-link>
        </li>
    </ul>
  </div>
</template>
<script>
    import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
                newslist: []
            }
        },
        created() {
            this.getNewsList();
        },
        methods: {
            getNewsList() {
                this.$http.get('http://vue.studyit.io/api/getnewslist').then(result=>{
                    if( result.body.status === 0 ) {
                        // 导入成功
                        // console.log( result.body.message );
                        this.newslist = result.body.message;
                    }else{
                        // 否则失败
                        Toast('获取失败');
                    }
                },result2=>{
                    
                });
            }
        }
    }
</script>
<style lang="less" scoped>
.mui-media-body {
    h3{
        font-size: 14px;
        font-weight: normal;
    }
    p{
        display: flex;
        justify-content: space-between;
        color: #226aff;
    }
}
</style>
